<template>
  <h2>①defineProps & defineEmits</h2>
  <div>{{ props.msg }}</div>
  <div>{{ props.userInfo }}</div>
  <a-button @click="add">{{ props.userInfo.count }}</a-button>
  <hr>
  <h2>②ref</h2>
  <div>{{ str }}</div>
  <slot name="ref"></slot>
  <hr>
  <h2>③provide & inject</h2>
  <div>childInjectMsg: {{ childInjectMsg }}</div>
  <childSon></childSon>
  <hr>
  <h2>④事件总线</h2>
  <a-button @click="handleBus">eventBus传值</a-button>
  <slot name="bus"></slot>
  <hr>
  <h2>⑤pinia</h2>
</template>

<script setup>
import {inject, ref} from "vue";
import childSon from './2childSon.vue'
import eventBus from "../utils/eventBus.js";
import useUserStore from "../store/modules/user.js";

const props = defineProps(['msg', 'userInfo'])
const emit = defineEmits(['change'])
const add = () => {
  emit('change')
}


let str = ref('this is string')
const addStr = () => {
  str.value = str.value + Math.floor(Math.random()*10)
}
defineExpose({
  str,
  addStr
})


const childInjectMsg = inject('parentProvideMsg')


const handleBus = () => {
  eventBus.emit('msg', 'child传的数据')
}


const userStore = useUserStore()
console.log('child: ' + JSON.stringify(userStore.userInfo));
</script>

<style scoped>

</style>